import React from "react";
import { ListItem } from "@rneui/themed";
import { View, StyleSheet, TouchableOpacity, Text } from "react-native";
import { MaterialCommunityIcons, Feather } from "@expo/vector-icons";
import { router, Stack } from "expo-router";
import { TwitterPalette } from "@/styles/twitter.style";
import { getHeaderStyle } from "@/styles/header.style";
import { useTheme } from "@/contexts/ThemeContext";
import RowButton from "@/components/CustomButton/RowButton";

export default function AccountSettings() {
  // 获取当前主题
  const { themeMode } = useTheme();

  // 获取基于当前主题的header样式
  const headerStyles = getHeaderStyle(themeMode);

  // 根据主题设置颜色
  const isDark = themeMode === "dark";
  const backgroundColor = isDark ? "#15202B" : "#FFFFFF";
  const textColor = isDark ? "#FFFFFF" : TwitterPalette.textPrimary;
  const borderColor = isDark ? "#38444D" : TwitterPalette.border;

  // 配置项数据
  const accountItems = [
    {
      title: "账号设置",
      icon: (
        <MaterialCommunityIcons
          name="account-outline"
          size={22}
          color={TwitterPalette.blue}
        />
      ),
      onPress: () => console.log("Navigate to account settings"),
    },
    {
      title: "修改密码",
      icon: (
        <MaterialCommunityIcons
          name="lock-outline"
          size={22}
          color={TwitterPalette.blue}
        />
      ),
      onPress: () => console.log("Navigate to change password"),
    },
    {
      title: "重置密码",
      icon: (
        <MaterialCommunityIcons
          name="lock-reset"
          size={22}
          color={TwitterPalette.blue}
        />
      ),
      onPress: () => console.log("Navigate to change password"),
    },
  ];

  const securityItems = [
    {
      title: "登录设备管理",
      icon: (
        <MaterialCommunityIcons
          name="cellphone"
          size={22}
          color={TwitterPalette.blue}
        />
      ),
      onPress: () => router.navigate("/settings/account/device"),
    },
    {
      title: "登录历史",
      icon: (
        <MaterialCommunityIcons
          name="history"
          size={22}
          color={TwitterPalette.blue}
        />
      ),
      onPress: () => router.navigate("/settings/account/login-history"),
    },
    {
      title: "安全通知",
      icon: (
        <MaterialCommunityIcons
          name="bell-outline"
          size={22}
          color={TwitterPalette.blue}
        />
      ),
      onPress: () => router.navigate("/settings/account/security-notifications"),
    },
  ];

  return (
    <>
      <Stack.Screen
        options={{
          title: "账号与安全",
          headerTitleAlign: headerStyles.headerTitleAlign as "left" | "center",
          headerStyle: headerStyles.headerStyle,
          headerTintColor: headerStyles.headerTintColor,
          headerTitleStyle: headerStyles.headerTitleStyle,
        }}
      />

      <View
        style={[
          styles.container,
          { backgroundColor: isDark ? "#15202B" : TwitterPalette.background },
        ]}
      >
        {/* 账号设置分组 */}
        <Text style={styles.sectionTitle}>账号</Text>
        <View
          style={[
            styles.listGroup,
            { backgroundColor: isDark ? "#192734" : "#fff" },
          ]}
        >
          {accountItems.map((item, i) => (
            <RowButton
              text={item.title}
              icon={item.icon}
              key={i}
              onPress={item.onPress}
            />
          ))}
        </View>

        {/* 安全设置分组 */}
        <Text style={styles.sectionTitle}>安全</Text>
        <View
          style={[
            styles.listGroup,
            { backgroundColor: isDark ? "#192734" : "#fff" },
          ]}
        >
          {securityItems.map((item, i) => (
            <RowButton
              text={item.title}
              icon={item.icon}
              key={i}
              onPress={item.onPress}
            />
          ))}
        </View>
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: TwitterPalette.background,
    paddingHorizontal: 16,
  },
  sectionTitle: {
    fontSize: 16,
    fontWeight: "600",
    color: "#2a8ed4",
    marginTop: 20,
    marginBottom: 12,
  },
  listGroup: {
    borderRadius: 12,
    backgroundColor: "#fff",
    overflow: "hidden",
    shadowColor: "rgba(0, 0, 0, 0.05)",
    shadowOffset: { width: 0, height: 2 },
    shadowRadius: 4,
    elevation: 1,
  },
});
